<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="项目名称">
              <a-input placeholder="" v-model="queryParam.projectName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="项目ID">
              <a-input placeholder="" v-model="queryParam.id"></a-input>
            </a-form-item>
          </a-col>
<!--          <a-col :md="4" :sm="8">-->
<!--            <a-form-item label="状态">-->
<!--              <j-dict-select-tag v-model="queryParam.isEnable" dictCode="valid_status"></j-dict-select-tag>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :md="8" :sm="8">
            <a-button type="primary" icon="search" @click="searchQuery">搜索</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="isEnable" slot-scope="text, record">
          <a-switch
            checked-children="有效"
            un-checked-children="无效"
            :checked="record.isEnable === 1"
            @click="isEnableEdit(record)"/>
        </span>

        <span slot="action" slot-scope="text, record">
          <a v-has="'myProject:queryById'" @click="handleDetail(record)">详情</a>
          <!--<a-divider type="vertical" />
          <a v-has="'myDevice:devicesById'" @click="showDeviceInfo(record)">设备列表</a>-->
        </span>
      </a-table>
    </div>
    <project-modal ref="modalForm" @ok="modalFormOk"></project-modal>
  </a-card>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import { projectEdit, api } from '../service.js'
  import ProjectModal from '../project/modules/ProjectModal.vue'
  import store from '@/store';
  import { TENANT_ID } from '@/store/mutation-types';
  import Vue from 'vue';

  export default {
    name: 'MyProjectList',
    mixins: [JeecgListMixin],
    components: {
      JDictSelectTag,
      ProjectModal
    },
    data () {
      let that = this;
      return {
        description: '项目列表',
        disableMixinCreated: true,
        // 表头
        columns: [
          {
            title: '#',
            align: 'center',
            width: 60,
            dataIndex: 'rowIndex',
            customRender: function (t, r, index) {
              return (that.ipagination.current - 1) * that.ipagination.pageSize + index + 1;
            }
          }, {
            title: '项目ID',
            align: 'left',
            width: 100,
            dataIndex: 'id'
          }, {
            title: '项目名称',
            align: 'left',
            dataIndex: 'projectName'
          }, {
            title: '项目地址',
            align: 'left',
            width: 500,
            dataIndex: 'projectAddress'
          },
          // {
          //   title: '状态',
          //   align: 'center',
          //   dataIndex: 'isEnable',
          //   width: 130,
          //   scopedSlots: { customRender: 'isEnable' }
          // },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 170,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: api.myProjectList
        }
      }
    },
    created () {
      this.tenantId = Vue.ls.get(TENANT_ID);
      this.userId = store.getters.userInfo.id;
      this.queryParam.currentUserId = this.userId;
      this.queryParam.currentTenantId = this.tenantId;
      this.queryParam.wrapper = true;
      this.searchQuery();
    },
    methods: {
      isEnableEdit(formData) {
        let that = this
        if (formData.isEnable === 1) {
          formData.isEnable = 0
        } else {
          formData.isEnable = 1
        }
        projectEdit(formData).then((res) => {
          if (res.success) {
            that.$message.success('操作成功')
            that.$emit('ok')
          } else {
            that.$message.warning('操作失败')
          }
        })
      },
      showDeviceInfo(record) {
        this.$router.push({ name: 'assets-project-device', params: { projectId: record.id } })
      }
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';
</style>
